<template>
  <a-range-picker v-model:value="value" :format="format" :show-time="true" :allow-empty="true"/>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
  start: String,
  end: String,
  format: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss'
  },
  showTime: {
    type: Boolean,
    default: true
  }
})

const value = computed<any>({
  set: (val) => {
    if (val && val.length) {
      emits('update:start', val[0].format(props.format))
    }
    if (val && val.length > 1) {
      emits('update:end', val[1].format(props.format))
    }
  },
  get: () => {
    if (props.start && props.end) {
      return [dayjs(props.start), dayjs(props.end)]
    }
    return null
  }
})

const emits = defineEmits(['update:start', 'update:end'])

</script>

<style scoped>

</style>
